<template>
    <div class="section-wrap">
        <div class="form-section">
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>关键要求</label>
                    </div>
                    <span @click="unfoldMeasure = !unfoldMeasure">{{unfoldMeasure?'收起': '展开'}}</span>
                </div>
                <div>
                    <p class="textarea"
                       :class="{'unfold':unfoldMeasure}">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>合理缺项</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div class="select-section">
                    <div class="active">
                        是
                    </div>
                    <div>
                        否
                    </div>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>应得分</label>
                </div>
                <p>4</p>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>实际得分</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p>3</p>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>问题图片</label>
                    </div>
                    <span>当前共{{imgList.length}}张照片</span>
                </div>
                <div class="upload-wrap">
                    <upload :imgList="imgList"></upload>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>扣分原因</label>
                </div>
                <div>
                    <p class="textarea">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>考核人</label>
                </div>
                <div>
                    <p>周瑜</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>考核时间</label>
                </div>
                <div>
                    <p>2019-08-10</p>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>整改要求</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p class="textarea">整改要求整改要求整改要求整改要求整改要求</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>整改期限</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <p>2019-08-10</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import upload from '@/commonComponents/upload/index'
export default {
    name: 'gapDetails',
    data () {
        return {
            unfoldMeasure: false, // 是否展开
            imgList: ['http://www.bosafe.com/web_images/bossien-%E5%8D%9A%E6%99%9F%E5%86%85%E7%BD%91.jpg']
        }
    },
    components: {
        upload
    },
    methdos: {
    }
}
</script>
<style lang="less" scoped>
.section-wrap {
    height: 100%;
}
.select-section {
    display: flex;
}
.select-section div {
    padding-left: 26px;
    background: url(../../../static/images/select.png) no-repeat left center;
    background-size: 17px 17px;
}
.select-section div:first-child {
    margin-right: 58px;
}
.select-section .active {
    background: url(../../../static/images/selected.png) no-repeat left center;
    background-size: 17px 17px;
}
</style>

